﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example12.aspx.cs" Inherits="Chapter34.Example12" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 34-12 用 HTMLMediaElement 属性获取媒体回放详情</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        table {
            border: thin solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 3px 4px;
        }

        body > * {
            float: left;
            margin: 2px;
        }

        div {
            clear: both;
        }
    </style>
</head>
<body>
    <video id="media" controls="controls" preload="metadata" width="360" height="240">
        <source src="Example12.timessquare.webm" />
        <source src="Example12.timessquare.ogv" />
        <source src="Example12.timessquare.mp4" />
        Video cannot be displayed
    </video>
    <table id="info" border="1">
        <tr>
            <th>Property</th>
            <th>Value</th>
        </tr>
    </table>
    <div>
        <button id="pressme">Press Me</button>
    </div>
    <script>
        var mediaElem = document.getElementById('media');
        var tableElem = document.getElementById('info');
        document.getElementById('pressme').onclick = displayValues;
        displayValues();
        function displayValues() {
            var propertyNames = ['currentTime', 'duration', 'paused', 'ended'];
            tableElem.innerHTML = '';
            for (var i = 0; i < propertyNames.length; i++) {
                tableElem.innerHTML += '<tr><td>' + propertyNames[i] + '</td><td>' + mediaElem[propertyNames[i]] + '</td></tr>';
            }
        }
    </script>
</body>
</html>
